<template>
	<view class="userInfo-com">
		<!-- 头像区域 -->
		<view class="bg-header">
			<view class="headPic-nickname">
				<image :src="userInfo.avatarUrl" mode="widthFix"></image>
				<text>{{userInfo.nickName}}</text>
			</view>
		</view>
		
		<!-- 收藏商品、收藏店铺、关注到商品 。。。。 -->
		<view class="collectBox" @click="clickHandle">
			<view class="collectBox-item">
				<text class="txtNum">3</text>
				<text class="txtname">收藏的店铺</text>
			</view>
			<view class="collectBox-item">
				<text class="txtNum">3</text>
				<text class="txtname">收藏的商品</text>
			</view>
			<view class="collectBox-item">
				<text class="txtNum">3</text>
				<text class="txtname">关注的商品</text>
			</view>
			<view class="collectBox-item">
				<text class="txtNum">3</text>
				<text class="txtname">足迹</text>
			</view>
		</view>
		
		<!-- 我的订单区域 -->
		<view class="myOrderBox">
			<view class="orderText">
				我的订单
			</view>
			
			<view class="orderBoxContent" @click="clickHandle">
				<view class="orderBox-item">
					<image src="../../static/userpage/todoL.png" mode=""></image>
					<text>待付款</text>
				</view>
				<view class="orderBox-item">
					<image src="../../static/userpage/cart.png" mode=""></image>
					<text>待收货</text>
				</view>
				<view class="orderBox-item">
					<image src="../../static/userpage/backMoney.png" mode=""></image>
					<text>退款/退货</text>
				</view>
				<view class="orderBox-item">
					<image src="../../static/userpage/orders.png" mode=""></image>
					<text>全部订单</text>
				</view>
			</view>
		</view>
		
		<!-- 第三面板  收货地址、退出登录 -->
		<view class="lastPanal">
			<view class="panal-item">
				<text>收货地址</text>
				<uni-icons type="arrowright" size="16"></uni-icons>
			</view>
			<view class="panal-item">
				<text>联系客服</text>
				<uni-icons type="arrowright" size="16"></uni-icons>
			</view>
			<view class="panal-item" @click="exitLogin">
				<text>退出登录</text>
				<uni-icons type="arrowright" size="16"></uni-icons>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
		name:"my-userInfo",
		data() {
			return {
				
			};
		},
		created() {
			console.log('userInfo',this.userInfo);
		},
		methods:{
			// 点击 提示功能未开发
			clickHandle(){
				uni.$showMsg('功能待开发...')
			},
			
			// 点击退出登录
			exitLogin(){
				// 弹窗确认
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定退出登录吗',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定',that);
							let token = ''
							that.updataToken(token)
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			...mapMutations('m_user',['updataToken'])
		},
		computed:{
			...mapState('m_user',['userInfo'])
		}
	}
</script>

<style lang="scss">
.lastPanal{
	width: 710rpx;
	border-radius: 20rpx;
	margin: 0 auto;
	background-color: #FFFFFF;
	margin-top: 40rpx;
	.panal-item{
		display: flex;
		height: 50rpx;
		line-height: 50rpx;
		// box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
		justify-content: space-between;
	}
}
	
	
	
.myOrderBox{
	width: 710rpx;
	margin: 0 auto;
	height: 260rpx;
	background-color: #FFFFFF;
	padding: 20rpx;
	box-sizing: border-box;
	border-radius: 20rpx;
	margin-top: 100rpx;
	.orderText{
		font-size: 28rpx;
		color: #4cc6aa;
		line-height: 60rpx;
		border-bottom: 2rpx solid #d7d7d7;
	}
	.orderBoxContent{
		display: flex;
		justify-content: space-evenly;
		.orderBox-item{
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 20rpx;
			justify-content: center;
			font-size: 28rpx;
			image{
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 10rpx;
			}
		}
		
	}
}	
	
	
.collectBox{
	width: 710rpx;
	height: 120rpx;
	background-color: #FFFFFF;
	position: absolute;
	top: 350rpx;
	left: 20rpx;
	border-radius: 20rpx;
	display: flex;
	justify-content: space-around;
	 .collectBox-item{
		 display: flex;
		 flex-direction: column;
		 align-items: center;
		 justify-content: center;
		font-size: 28rpx;
		.txtname{
			color: #4cc6aa;
		}
	 }
}


.bg-header{
	width: 100%;
	height: 400rpx;
	background-color: #4cc6aa;
	.headPic-nickname{
		display: flex;
		flex-direction: column;
		align-items: center;
		image{
			width: 250rpx;
			height: 250rpx;
			border-radius: 50%;
			border: 2rpx solid #FFFFFF;
			margin: 20rpx 0;
		}
		text{
			color: #FFFFFF;
		}
	}
}

.userInfo-com{
	min-height: 100vh;
	background-color: #f5f5f5;
}
</style>
